<template>
  <div class="main">
    <div v-if="!user" class="login" @click="login">
      <img src="@/assets/default-avatar.jpg" alt="">
      <span>点击登录</span>
    </div>
    <div v-else class="login">
      <img v-if='user.avatar' :src="host+user.avatar" alt="">
      <img v-else src="@/assets/default-avatar.jpg" alt="">
      <span>{{user.nickname}}</span>
    </div>
    <div v-if="user">
      <ul class="uk-list uk-list-striped">
        <li>
          <a-upload style="width:100%" :action="action" :show-upload-list="false" :before-upload="beforeUpload"
            @change="uploadChange">
            <div class="list">
              <a-icon type="upload" style="margin-right:10px" />上传头像 <a-spin v-if="isUploading"></a-spin>
            </div>
          </a-upload>
        </li>
        <li>
          <div class="list" @click="changePassword">
            <a-icon type="form" style="margin-right:10px" />修改密码
          </div>
        </li>
        <li>
          <div class="list" @click="logout">
            <a-icon type="logout" style="margin-right:10px" />退出登录
          </div>
        </li>
      </ul>
    </div>
    <a-modal title="修改密码" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <label>当前密码：</label>
      <a-input size='large' v-model="oldPassword"></a-input>
      <br />
      <br />
      <label>新密码：</label>
      <a-input size='large' v-model="newPassword"></a-input>
    </a-modal>
    <div v-if="active" class="uk-inline-clip uk-transition-toggle">
      <div class="uk-transition-fade">
        <div   style="width:200px;height:200px;background:red"></div>
      </div>
  </div>
    
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import { updateUser } from "@/api/index.js";
import { host } from "@/utils/request.js";
import { message, Icon, Upload, Spin, Modal, Input } from "ant-design-vue";

export default {
  data: () => {
    return {
      host: host,
      user: null,
      action: host + "/api/upload",
      isUploading: false,
      visible: false,
      oldPassword: "",
      newPassword: "",
      active:false
    };
  },
  components: {
    Footer,
    "a-icon": Icon,
    "a-upload": Upload,
    "a-spin": Spin,
    "a-modal": Modal,
    "a-input": Input,
  },

  beforeRouteEnter(to, from, next) {
    console.log("beforeRouterEnter");
    next((vm) => {
      if (localStorage.getItem("user")) {
        vm.user = JSON.parse(localStorage.getItem("user"));
      }
    });
  },
  created() {},
  methods: {
    test() {
      // this.$uikit.notification({
      //   message: "my-message!",
      //   status: "primary",
      //   pos: "top-right",
      //   timeout: 5000,
      // });
      this.active = true
    },
    login() {
      this.$router.push("/login");
    },
    logout() {
      localStorage.removeItem("user");
      this.user = null;
      message.success("已退出");
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      if (isJpgOrPng && isLt2M) {
        this.isUploading = true;
      }
      return isJpgOrPng && isLt2M;
    },
    uploadChange(e) {
      console.log(e);
      if (e.file && e.file.response && e.file.response.url) {
        this.isUploading = false;
        this.user.avatar = e.file.response.url;
        localStorage.setItem("user", JSON.stringify(this.user));
        updateUser({
          nickname: this.user.nickname,
          password: this.user.password,
          userid: this.user.userid,
          avatar: this.user.avatar,
        });
      }
    },
    changePassword() {
      this.visible = true;
    },
    handleCancel() {
      this.oldPassword = "";
      this.newPassword = "";
      this.visible = false;
    },
    handleOk() {
      if (!this.newPassword || !this.oldPassword) {
        message.warning("请输入密码");
      }
      if (this.oldPassword !== this.user.password) {
        message.warning("当前密码输入错误");
      }
      if (this.newPassword === this.oldPassword) {
        message.warning("新旧密码一样");
      }
      let param = {
        nickname: this.user.nickname,
        password: this.newPassword,
        userid: this.user.userid,
        avatar: this.user.avatar,
      };
      updateUser(param).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          message.success("修改成功，请重新登录");
          this.visible = false;
          setTimeout(() => {
            this.logout();
          }, 1000);
        } else {
          message.warning("修改失败");
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.login {
  display: flex;
  padding: 10px;
  align-items: center;
  padding-top: 30px;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  span {
    margin-left: 10px;
    font-size: 26px;
    font-weight: 600;
  }
}
.list {
  display: flex;
  align-items: center;
}
// .upload {
//   margin-top: 50px;
// }
/deep/.ant-upload.ant-upload-select {
  width: 100%;
}
</style>